/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-04-10 22:57:51
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-04-14 15:33:25
 */
import utils from "@/common/utils";
import React from "react";
import "./index.scss";
export default (props) => {
  return (
    <div>
      {props.list.length ? (
        <div className="pic_list_wrap">
          {props.list.map((url, index) => {
            return (
              <div className="pic_item" key={index}>
                <img src={url} />
                <div
                  className="delete_pic iconfont-hsyt"
                  onClick={(index) => props.delete(index)}
                >
                  &#xe677;
                </div>
              </div>
            );
          })}
          {props.list.length < 6 ? (
            <div className="pic_item add_pic_btn iconfont-hsyt">
              &#xe69f;
              <input
                className="fileInput"
                type="file"
                accept="image/*"
                capture="camera"
                onChange={(e) => {
                  utils.image.fileToBase64(e, props.onChange);
                }}
              />
            </div>
          ) : (
            ""
          )}
        </div>
      ) : (
        <div className="none_pic_wrap">
          <div className="add_pic_btn iconfont-hsyt">
            &#xe69f;
            <input
              className="fileInput"
              type="file"
              accept="image/*"
              capture="camera"
              onChange={(e) => {
                utils.image.fileToBase64(e, props.onChange);
              }}
            />
          </div>
          <div className="up_text">
            <div className="up_title">上传图片</div>
            <div className="up_tips">病症图片或检查图片，方便医生确认</div>
          </div>
        </div>
      )}
    </div>
  );
};
// export default class Index extends React.Component {
//   //上传图片
//   changeFile = (file) => {
//     const result = file.target.files[0];
//     try {
//       let reader = new FileReader(); //转base64
//       reader.readAsDataURL(result);
//       reader.onload = (e) => {
//         const base64 = e.target.result;
//         this.props.onChange(base64);
//       };
//     } catch (e) {
//       console.log(e.message);
//     }
//   };

//   render() {
//     return (
//       <div>
//         {this.props.list.length ? (
//           <div className="pic_list_wrap">
//             {this.props.list.map((url, index) => {
//               return (
//                 <div className="pic_item" key={index}>
//                   <img src={url} />
//                   <div
//                     className="delete_pic iconfont-hsyt"
//                     onClick={(index) => this.props.delete(index)}
//                   >
//                     &#xe677;
//                   </div>
//                 </div>
//               );
//             })}
//             {this.props.list.length < 6 ? (
//               <div className="pic_item add_pic_btn iconfont-hsyt">
//                 &#xe69f;
//                 <input
//                   className="fileInput"
//                   type="file"
//                   accept="image/*"
//                   capture="camera"
//                   onChange={(e) => {
//                     this.changeFile(e);
//                   }}
//                 />
//               </div>
//             ) : (
//               ""
//             )}
//           </div>
//         ) : (
//           <div className="none_pic_wrap">
//             <div className="add_pic_btn iconfont-hsyt">
//               &#xe69f;
//               <input
//                 className="fileInput"
//                 type="file"
//                 accept="image/*"
//                 capture="camera"
//                 onChange={(e) => {
//                   this.changeFile(e);
//                 }}
//               />
//             </div>
//             <div className="up_text">
//               <div className="up_title">上传图片</div>
//               <div className="up_tips">病症图片或检查图片，方便医生确认</div>
//             </div>
//           </div>
//         )}
//       </div>
//     );
//   }
// }
